<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested" %>
<html>
   <head>
	   <script>
		  function processURL() {
     		document.getElementById("displayblock").innerHTML = '';
     		document.getElementById("vowelfamilyblock").innerHTML = '';
     		
     		var voweltype = trimSpaces(getCheckedRadio("voweltype"));
     		var selectedvowel = trimSpaces(getComboSelected('vowel'));
     		
     		if(voweltype.length != 0 && selectedvowel.length != 0) {
        		var url = '/lwf/vowelfamily.do?action=display&vowel=' + selectedvowel + '&voweltype=' + voweltype;
        		retrieveURL(url, 'vowelfamilyblock');
     		}
		    else {
		        alert('Please select the choice');
		    }
		  }
		  function displayData(chosenvalue) {
		    //var chosenvalue = trimSpaces(getComboSelected('vowel'));
		    if(chosenvalue.length != 0) {
				url = '/lwf/rhymingwords.do?action=display&wordfamily=' + chosenvalue;
		    	retrieveURL(url, 'displayblock');
		    }
		  }
      </script>
   </head>
   <html:form action="/vowelfamily" >
   
   <table border="0" align="center" width="100%" bordercolor="red">
       <tr>
           <td align="center">
               <table border="0" width="80%" class="radiotable">
                  <tr>
                     <td width="10%">&nbsp;</td>
                     <td width="40%">
			               <table border="0" width="100%">
			                  <tr>
			                      <td width="40%" class="formLabel">Pick an vowel type: </td>
			                      <td width="10%">&nbsp;</td>
				                  <td width="3%"><input type="radio" value="2" name="voweltype" onclick="processURL()"/></td>
				                  <td width="8%" class="leftlabel">Long</td>
				                  <td width="5%">&nbsp;</td>
				                  <td width="3%"><input type="radio" value="1" name="voweltype" onclick="processURL()"/></td>
				                  <td width="8%" class="leftlabel">Short</td>
				                  <td width="13%">&nbsp;</td>
				               </tr>
			               </table>
                     </td>
                     <td width="40%">
			               <table border="0" width="100%">
			                  <tr>
				                  <td width="40%" class="formLabel">Select an Vowel:</td>
				                  <td class="leftlabel">&nbsp;</td>
				                  <td width="20%">
				                      <bean:define id="vowels" name="vfaf" property="vowels" type="java.util.List" />
					                  <html:select property="vowel" onchange="processURL()" styleClass="dropdownbox">
					                      <html:options property="vowels"/>
					                  </html:select>
				                  </td>
				                  <td width="40%">&nbsp;</td>
				               </tr>
			               </table>
                     </td>
                     <td width="10%">&nbsp;</td>
                  </tr>
               </table>

           </td>
       </tr> 
       <tr>
           <td>&nbsp;</td>
       </tr> 
       <tr>
           <td>
               <table border="0" width="100%">
                  <tr>
                      <td width="10%">&nbsp;</td>
                      <td width="80%" align="center">
                         <span id="vowelfamilyblock"></span>
                      </td>
                      <td width="10%">&nbsp;</td>
                  </tr>                  
               </table>
           </td>
       </tr>
       <tr>
           <td>&nbsp;</td>
       </tr> 
       <tr>
           <td>
               <table border="0" width="100%">
                  <tr>
                      <td width="10%">&nbsp;</td>
                      <td width="80%" align="center">
                         <span id="displayblock"></span>
                      </td>
                      <td width="10%">&nbsp;</td>
                  </tr>                  
               </table>
           </td>
       </tr>
   </table>  
   </html:form>
</html>